<%@ page import="grails.converters.JSON"%>

<!doctype html>
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta name="layout" content="common">
<title>Dashboard</title>
<script src="${resource(dir:'js', file:'highcharts.js') }"></script>
</head>
<body>
	<h2>Expense Overview</h2>
	<hr />

	<div class="pull-left span5">
		<h3>Spending Summary</h3>
		<table class="table table-striped table-bordered" id="summary">
			<tr>
				<td><b style="color: orangered;">Total Expense</b></td>
				<td><b style="color: orangered;">Budget</b> <a
					href="<g:createLink controller="profile" action="editBudget" />"
					id="edit-budget" class="btn pull-right">Edit</a></td>
			</tr>
			<tr>
				<td><b>Today:</b> $${summaryMap.get('today_spend') }</td>
				<td><b>This Week:</b> $${summaryMap.get('weekly_budget')}</td>
			</tr>
			<tr>
				<td><b>Past 7 days:</b> $${summaryMap.get('week_spend') }</td>
				<td><b>This Month:</b> $${summaryMap.get('monthly_budget')}</td>
			</tr>
			<tr>
				<td><b>This Month:</b> $${summaryMap.get('month_spend') }</td>
				<td><b style="color: orangered;">Target</b> <a
					href="<g:createLink controller="profile" action="editTarget" />"
					id="edit-target" class="btn pull-right">Edit</a></td>
			</tr>
			<tr>
				<td><b>Year To Date:</b> $${summaryMap.get('year_spend') }</td>
				<td><b>This Week:</b> $${summaryMap.get('weekly_target')}</td>
			</tr>
			<tr>
				<td></td>
				<td><b>This Month:</b> $${summaryMap.get('monthly_target')}</td>
			</tr>
		</table>
	</div>
	<div class="pull-left span5">
		<h3>Month to date: Spending Detail</h3>
		<table class="table table-striped table-bordered pull-left"
			style="width: 50%;">
			<tr>
				<td><b style="color: orangered;">Top card spending</b></td>
			</tr>
			<g:each in="${topCardSpending}" var="map">
				<tr>
					<td><b> ${map.get('card').brand }:
					</b> $${map.get('amount') }</td>
				</tr>
			</g:each>
		</table>

		<table class="table table-striped table-bordered pull-left"
			style="width: 50%;">
			<tr>
				<td><b style="color: orangered;">Top category spending</b></td>
			</tr>

			<g:each in="${topCategorySpending}" var="map">
				<tr>
					<td><b> ${map.get('category') }:
					</b> $${map.get('amount') }</td>
				</tr>
			</g:each>
		</table>
	</div>

	<div style="clear: both;"></div>
	<br />
	<h3 class="pull-left">Spending Chart</h3>
	<form class="pull-right" style="margin: 10px;" method="GET"
		action="<g:createLink controller="dashboard" action="dashboard" />">

		<span class="pull-left" style="margin-right: 10px;">From </span>
		<div class="input-append date pull-left" id="from-date"
			data-date="${fmt.format(fromDate) }"
			data-date-format="dd-mm-yyyy">
			<input class="span2" type="text"
				value="${fmt.format(fromDate) }" name="from_date" readonly>
			<span class="add-on" style="height: 30px;"><i
				class="icon-calendar"></i></span>
		</div>

		<span class="pull-left" style="margin: auto 10px;">To </span>
		<div class="input-append date pull-left" id="to-date"
			data-date="${fmt.format(toDate) }"
			data-date-format="dd-mm-yyyy">
			<input class="span2" type="text"
				value="${fmt.format(toDate) }" name="to_date" readonly>
			<span class="add-on" style="height: 30px;"><i
				class="icon-calendar"></i></span>
		</div>
		<button class="btn pull-left" style="margin-left: 10px;" type="submit">Update</button>
		<p></p>
		<p></p>
	</form>
	<div style="clear: both;"></div>
	<div style="width: 100%;">
		<div id="chart_div" style="height: 500px;"></div>
	</div>

	<br />
	<h3 class="pull-left">
		Recent Transactions (${dateFormat.format(fromDate) }
		to
		${dateFormat.format(toDate) })
	</h3>
	<div class="btn-group pull-right">
		<a
			href="<g:createLink controller="transaction" action="list" params="[format:'csv']"/>"
			class="btn"><b>CSV</b></a> <a
			href="<g:createLink controller="transaction" action="list" params="[format:'pdf']"/>"
			class="btn"><b>PDF</b></a>
	</div>
	<span class="pull-right" style="margin: 5px 10px;">Export To </span>

	<div style="clear: both;"></div>
	<table cellpadding="0" cellspacing="0" border="0"
		class="display table table-striped" id="example">
		<thead>
			<tr>
				<th>Date</th>
				<th>Merchant</th>
				<th>Amount</th>
				<th>Card</th>
				<th>Add details</th>
				<th>Category</th>
			</tr>
		</thead>
		<tbody>
			<g:each in="${transactions}" var="transaction">
				<tr class="gradeA" id="transaction-row-${transaction.id }">
					<td>
						${dateFormat.format(transaction.txnDate) }
					</td>
					<td>
						${transaction.merchant.name }
					</td>
					<td>
						${transaction.amount }
					</td>
					<td class="center"><b> ${transaction.card.bank.name } - ${transaction.card.brand }
					</b> (****${transaction.card.maskNumber() })</td>
					<td><input id="detail" type="text"
						value="${transaction.description }" /></td>
					<g:set var="currentCategoryId"
						value="${transactionCategoryService.getCategoryId(transaction)}" />


					<td><select id="category">
							<g:each in="${categories}" var="category">
								<g:if test="${currentCategoryId == category.id }">
									<option selected="selected" value="${category.id }">
										${category.name}
									</option>
								</g:if>
								<g:else>
									<option value="${category.id }">
										${category.name}
									</option>
								</g:else>
							</g:each>
					</select></td>
				</tr>
			</g:each>
		</tbody>
		<tfoot>
			<tr>
				<th>Date</th>
				<th>Merchant</th>
				<th>Amount</th>
				<th>Card</th>
				<th>Add details</th>
				<th>Category</th>
			</tr>
		</tfoot>
	</table>

	<!-- Templates -->
	<script type="text/template" id="summary-tpl">
<tr>
	<td><b style="color: orangered;">Total Expense</b></td>
	<td><b style="color: orangered;">Budget</b></td>
</tr>
<tr>
	<td><b>Today:</b> $ {{todayspend}}</td>
	<td><b>This Week:</b>: $70/$100</td>
</tr>
<tr>
	<td><b>Past 7 days:</b> $ {{sevendayspend}}</td>
	<td><b>This Month:</b> $169/$500</td>
</tr>
<tr>
	<td><b>This Month:</b> $ {{monthspend}}</td>
	<td></td>
</tr>
<tr>
	<td><b>Year To Date:</b> $ {{yearspend}}</td>
	<td></td>
</tr>

</script>
	<script type="text/javascript">
		//         
		MC.cardsJSON =
	${cardsJSON}
		;
		MC.transactionsJSON =
	${new JSON(transactions).toString()}
		;
		MC.monthlySpending =
	${monthlySpending}
		;
		///
	</script>

	<!-- App -->
	<script src="${resource(dir:'js/app', file:'transaction_mod.js') }"></script>
	<script src="${resource(dir:'js/app', file:'card_mod.js') }"></script>
	<script src="${resource(dir:'js/app', file:'chart_mod.js') }"></script>
	<script src="${resource(dir:'js/app', file:'dashboard_mod.js') }"></script>
</body>
</html>